<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF文件翻译</title>
    <style>
        /* 全局样式 */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
            color: #333;
            line-height: 1.6;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
        }
        h1 {
            font-size: 2rem;
            color: #2c3e50;
            margin-bottom: 20px;
            text-align: center;
        }
        p {
            font-size: 1rem;
            color: #555;
            margin: 10px 0;
        }

        /* 提示框样式 */
        .alert {
            background-color: #fff3cd;
            color: #856404;
            padding: 15px;
            border: 1px solid #ffeeba;
            border-radius: 5px;
            margin-bottom: 20px;
            width: 100%;
            max-width: 600px;
            text-align: center;
            font-weight: bold;
        }

        /* 表单样式 */
        form {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 20px;
        }
        input[type="file"] {
            margin-bottom: 15px;
            padding: 10px;
            border: 2px solid #ddd;
            border-radius: 5px;
            background-color: #fff;
            transition: border-color 0.3s ease;
            width: 100%;
            max-width: 400px;
        }
        input[type="file"]:hover {
            border-color: #aaa;
        }
        button {
            padding: 10px 20px;
            font-size: 1rem;
            color: #fff;
            background-color: #3498db;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        button:hover {
            background-color: #2980b9;
        }
        button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }

        /* 进度条样式 */
        .progress {
            width: 100%;
            max-width: 400px;
            background-color: #e0e0e0;
            border-radius: 5px;
            overflow: hidden;
            margin-top: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .progress-bar {
            height: 20px;
            background-color: #2ecc71;
            width: 0%;
            text-align: center;
            line-height: 20px;
            color: #fff;
            transition: width 0.3s ease;
        }

        /* 隐藏元素 */
        .hidden {
            display: none;
        }

        /* 下载链接样式 */
        a {
            display: inline-block;
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 1rem;
            color: #fff;
            background-color: #d35400; /* 更温和的橙红色 */
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }
        a:hover {
            background-color: #b33c00; /* 深一点的橙红色 */
        }

        /* 错误提示样式 */
        .error-message {
            color: #cc0000; /* 更温和的深红色 */
            font-weight: bold;
        }

        /* GitHub 链接样式 */
        .github-link {
            margin-top: 20px;
            font-size: 0.9rem;
            color: #3498db;
            text-decoration: none;
        }
        .github-link:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <!-- 提示框 -->
    <div class="alert">
        ⚠️ 运行过程中请勿刷新页面！
    </div>

    <h1>PDF 文件翻译</h1>
    <form id="uploadForm">
        <input type="file" id="fileInput" accept=".pdf" required />
        <button type="submit" id="uploadButton">上传并翻译</button>
    </form>
    <div class="progress hidden" id="progressBar">
        <div class="progress-bar" id="progressIndicator">0%</div>
    </div>
    <p id="statusMessage"></p>
    <p id="errorMessage" class="error-message hidden"></p>
    <a id="downloadLink" class="hidden" href="#">点击下载翻译结果</a>

    <!-- GitHub 链接 -->
    <a href="https://gitee.com/micosliang/good-translator" target="_blank" class="github-link">
        查看项目源码 (GitHub)
    </a>

    <script>
        const form = document.getElementById('uploadForm');
        const fileInput = document.getElementById('fileInput');
        const uploadButton = document.getElementById('uploadButton'); // 获取上传按钮
        const progressBar = document.getElementById('progressBar');
        const progressIndicator = document.getElementById('progressIndicator');
        const statusMessage = document.getElementById('statusMessage');
        const errorMessage = document.getElementById('errorMessage');
        const downloadLink = document.getElementById('downloadLink');

        form.addEventListener('submit', async (e) => {
            e.preventDefault();
            const file = fileInput.files[0];
            if (!file) {
                alert("请选择一个 PDF 文件！");
                return;
            }
        
            // 清空之前的错误信息和下载链接
            errorMessage.classList.add('hidden');
            errorMessage.textContent = '';
            downloadLink.classList.add('hidden');
        
            // 禁用上传按钮
            uploadButton.disabled = true;
        
            // 显示进度条
            progressBar.classList.remove('hidden');
            statusMessage.textContent = "正在上传文件...";
        
            // 上传文件
            const formData = new FormData();
            formData.append('file', file);
        
            try {
                const uploadResponse = await fetch('/upload/', {
                    method: 'POST',
                    body: formData,
                });
        
                if (!uploadResponse.ok) {
                    const errorData = await uploadResponse.json();
                    throw new Error(errorData.message || "文件上传失败！");
                }
        
                const uploadData = await uploadResponse.json();
                statusMessage.textContent = "文件上传中...";
        
                // 轮询检查状态
                const checkStatus = async () => {
                    const statusResponse = await fetch(`/status/${file.name}`);
                    const statusData = await statusResponse.json();
        
                    if (statusData.status === 'completed') {
                        progressBar.classList.add('hidden');
                        statusMessage.textContent = `处理完成！结果已保存到: ${file.name.substr(1, file.name.length - 4) + '.md'}`;
        
                        // 将相对路径转换为绝对路径
                        const absoluteDownloadUrl = new URL(statusData.download_url, window.location.origin).href;
                        downloadLink.href = absoluteDownloadUrl;
        
                        downloadLink.classList.remove('hidden');
                        downloadLink.textContent = `点击下载翻译结果 (${file.name.substr(1, file.name.length - 4) + '.md'})`;
        
                        // 启用上传按钮
                        uploadButton.disabled = false;
                    } else if (statusData.progress === 0) {
                        // 如果 progress 为 0，表示上传或处理失败
                        progressBar.classList.add('hidden');
                        statusMessage.textContent = "";
                        errorMessage.textContent = "上传或处理失败，请重新上传文件！";
                        errorMessage.classList.remove('hidden');
        
                        // 启用上传按钮
                        uploadButton.disabled = false;
                    } else {
                        progressIndicator.style.width = `${statusData.progress}%`;
                        progressIndicator.textContent = `${statusData.progress}%`;
                        statusMessage.textContent = statusData.progress == 50 
                            ? "解析完成，正在翻译..." 
                            : (statusData.progress == 25 
                                ? "文件已上传，正在解析..." 
                                : "文件上传中...");
                        setTimeout(checkStatus, 15000); // 每 15 秒检查一次
                    }
                };
        
                checkStatus();
            } catch (error) {
                // 处理错误情况
                progressBar.classList.add('hidden');
                statusMessage.textContent = "";
                errorMessage.textContent = error.message;
                errorMessage.classList.remove('hidden');
        
                // 启用上传按钮
                uploadButton.disabled = false;
            }
        });        
    </script>
</body>
</html>
